import { defineComponent } from 'vue';
import { system } from '@/api';
class Pagination {
	pageSize = 10;
	pageNum = 1;
	total = 0;
	pageSizes = [10, 20, 50, 100];
	pageCurrent = 1;
	orderBy = '';
	sort = '';
	layout = 'sizes, prev, pager, next, jumper, total';
}
const BasePage = defineComponent({
	setup(props: any, { attrs, slots, emit }) {},
	data: function () {
		return {
			selectRows: new Array<{ [key: string]: any }>(),
			paginationInfo: new Pagination(),
			loading: false,
			menu: new system.menu(),
			tableInfo: {
				data: [],
				'header-row-class-name': this.headerRowClassName,
				'header-cell-class-name': this.headerCellClassName,
				'row-class-name': this.rowClassName,
				height: '100%',
				border: 'border'
			}
		};
	},
	props: {
		headerRowClassName: String,
		headerCellClassName: String,
		rowClassName: String,
		divclass: String,
		dataFunction: {
			type: Function,
			required: true
		},
		otherParams: Object
	},
	methods: {
		/**当选择项发生变化时会触发该事件 */
		selectionChange(selection: any) {
			this.selectRows = selection;
		},
		/** 获取所有选中行的编号*/
		getSelectionRowsId(key: string): Array<any> {
			let values = new Array<any>();
			key = key ? key : 'id';
			this.selectRows.forEach((value) => {
				values.push(value[key]);
			});
			return values;
		},
		/**获取选中行 */
		getSelectRows() {
			return this.selectRows;
		},
		/**排序事件 */
		sortChange(data: any) {
			this.paginationInfo.orderBy = data.prop;
			this.paginationInfo.sort = data.order == 'descending' ? 'desc' : 'asc';
			this.loadData();
		},
		/**列表每页展示数据大小变化时触发方法 */
		pageSizeChange(val: number) {
			this.paginationInfo.pageSize = val;
			this.loadData();
			//console.log(`每页 ${val} 条`)
		},
		/**列表当前页码变化时触发方法 */
		pageCurrentChange(val: number) {
			this.paginationInfo.pageCurrent = val;
			this.loadData();
			//console.log(`当前页: ${val}`)
		},
		/**加载列表数据 */
		loadData() {
			let data = {
				pageNum: this.paginationInfo.pageCurrent,
				pageSize: this.paginationInfo.pageSize,
				orderBy: this.paginationInfo.orderBy,
				sort: this.paginationInfo.sort,
				...this.otherParams
			};
			let _this = this;
			this.dataFunction(data)
				.then(function (response: any) {
					_this.tableInfo.data = response.data.rows;
					_this.paginationInfo.total = response.data.total;
				})
				.catch(function (error: any) {
					console.log(error);
				});
		},
		/**刷新数据 */
		refresh() {
			this.loadData();
		}
	},
	created() {
		this.loadData();
	},
	render() {
		/**table表绑定的数据 */
		const tableData = this.tableInfo;
		/**table表绑定的事件 */
		const tableFunction = {
			onSortChange: this.sortChange,
			onSelectionChange: this.selectionChange
		};
		/**分页绑定的数据 */
		const pageData = {
			'page-size': this.paginationInfo.pageSize,
			total: this.paginationInfo.total,
			'current-page': this.paginationInfo.pageCurrent,
			'page-sizes': this.paginationInfo.pageSizes,
			layout: this.paginationInfo.layout
		};
		/**分页绑定的事件 */
		const pageFunction = {
			onCurrentChange: this.pageCurrentChange,
			onSizeChange: this.pageSizeChange
		};
		//单独标签可以直接{...{ props, scopedSlots: { ...this.$scopedSlots } }}
		let table = (
			<el-table {...tableData} {...tableFunction}>
				{Object.keys(this.$slots).map((name) => (this.$slots as any)[name]())}
			</el-table>
		);
		let pagination = <el-pagination {...pageData} {...pageFunction}></el-pagination>;
		return (
			<div class={this.divclass}>
				{table}
				{pagination}
			</div>
		);
	}
});
export default BasePage;
